﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="d1" style="width: 300px; height: 300px; background-color: cadetblue;"onclick="dj()" onmouseenter="djr()" onmouseleave="dlk()" onmousemove="dm()"  >
			姓名：<input type="text"  id="i1" width="100px" onfocus="hqjd()"  onblur="sqjd()"/><br/>
			密码：<input type="password"  id="i2" width="100px" onfocus="hqpw()" onblur="sqpw()"/><br/>
			提示：<input type="text" name="" id="t1" value="" /><br/>
			<input type="button" name="" id="" value="提交" onclick="divcolor();tj();"/>
			<input type="button" name="" id="test" value="单击测试按钮" onclick="dj()" />
			<input type="button" name="" id="add" value="添加监视器" onclick="myaddEventListener()"/>
			<input type="button" name="" id="shanchu" value="清除监视器" onclick="myremoveEventListener()" />
		</div>
	</body>
	<script type="text/javascript">
	//单击事件的绑定方式
	// div
	//document.getElementById('d1').onclick=dj;
	//document.getElementById('d1').addEventListener('click',dj);
	//按钮
	//document.getElementById('test').onclick=dj;
	//document.getElementById('test').addEventListener('click',dj);
	function dj(){
		console.log('单机')
	}
	// 进入离开移动的3种绑定方式
	//进入 
	//document.getElementById('d1').addEventListener('mouseenter',djr;
	//document.getElementById('d1').onmouseenter=djr;
	function djr(){
		console.log('进入')
	}
	//离开
	//document.getElementById('d1').onmouseleave=dlk;
	//document.getElementById('d1').addEventListener('mouseleave',dlk
	function dlk(){
		console.log('离开')
	}
	//移动
	//document.getElementById('d1').onmousemove=dm;
	//document.getElementById('d1').addEventListener('mousemove',dm);
	function dm(){
		console.log('移动')
	}
		function divcolor(){
			document.getElementById('d1').style.backgroundColor='royalblue';
		}
		function hqjd(){
			console.log('用户在输入名称');
			
		}
		function sqjd(){
			if(document.getElementById('i1').value==' '){
				alert('没有输入用户名');
			}
			
		}
		function hqpw(){
			console.log('用户在输入密码');
		}
		function sqpw(){
			if(document.getElementById('i2').value==' '){
				alert('没有输入密码');
			}
		}
		function tj(){
			if(document.getElementById('i1').value==' '){
				document.getElementById('t1').value='用户名为空';
			}
			if(document.getElementById('i2').value==' '){
				document.getElementById('t1').value='密码为空';
			}
			if(document.getElementById('i1').value ==' ' && document.getElementById('i2').value==' '){
				document.getElementById('t1').value='用户名和密码为空';
			}
			
		}
		// 实现div移动事件
		//添加监视器
		
		function myaddEventListener(){
			document.getElementById('d1').addEventListener('mousemove',dm)
		}
		//移除监视器
		function myremoveEventListener(){
			document.getElementById('d1').removeEventListener('mousemove',dm)
		}

	</script>
</html>